<template>
    <view class="content">
        <view class="nav">
            <view class="name">
                <text>杭州市梦想小镇</text>
            </view>
            <view class="search">
                <input type="text" placeholder="永辉超市优惠商品" @click="goToSearch">
            </view>
        </view>
        <view class="tupian">
            <image class="tu" src="/static/imgs/assets/02.jpg"></image>
        </view>
        <view class="sort">
            <view class="sort-left">
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/super.png"></image>
                    <view>超市便利</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/basket.png"></image>
                    <view>菜市场</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/fruits.png"></image>
                    <view>水果店</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/flower.png"></image>
                    <view>鲜花绿植</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/drug.png"></image>
                    <view>医药健康</view>
                </view>
            </view>
            <view class="sort-right">
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/home.png"></image>
                    <view>家居时尚</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/cake.png"></image>
                    <view>烘焙蛋糕</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/sign.png"></image>
                    <view>签到</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/prestige.png"></image>
                    <view>大牌免运</view>
                </view>
                <view class="sortlist">
                    <image class="sortimg" src="/static/imgs/assets/red.png"></image>
                    <view>红包套餐</view>
                </view>
            </view>
        </view>
          <view class="shop">
         <view class="shop-header">
        <view>附近店铺</view>
        <view @click="moreclick">查看更多</view>
      </view>
      <view v-for="item in shops" :key="item.id" @click="shopclick(item._id)">
        <view class="hot">
          <image class="logoimg" :src="`/static/${item.imgUrl}`"></image>
          <view class="shop-info">
            <view class="shop-name">{{item.name}}</view>
            <view class="shop-data">
              月售: {{item.sales}} 起送: {{item.expressLimit}} 基础运费: {{item.expressPrice}}
            </view>
            <view class="shop-slogan" style="color: red;">{{item.slogan}}</view>
          </view>
        </view>
        <view class="separator"></view>
      </view>
    </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                shops:[],
                searchKeyword: ''
            }
        },
        onLoad() {
            this.show();
        },
        methods: {
          show() {
              uni.request({
            url: "http://localhost:3000/hotList",
                success: (res) => {
                  this.shops = res.data;
                },
                fail: (err) => {
                      console.error("数据请求失败", err);
            }
          });
        },
      //点击商铺跳转
      shopclick(id) {
      console.log(id)
      uni.navigateTo({
        url:`/pages/detail/detail?id=${id}`,
      });
    },
        //查看更多
      moreclick(){
        uni.navigateTo({
        url:'/pages/index/more',
      });
      },
      goToSearch() {
        uni.navigateTo({
          url: '/pages/index/search'
        })
      },
      handleSearch() {
        if (!this.searchKeyword.trim()) {
            this.show();
            return;
        }
        uni.request({
            url: "http://localhost:3000/hotList",
            success: (res) => {
                this.shops = res.data.filter(shop => 
                    shop.name.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
                    shop.slogan.toLowerCase().includes(this.searchKeyword.toLowerCase())
                );
            },
            fail: (err) => {
                console.error("搜索失败", err);
                uni.showToast({
                    title: '搜索失败',
                    icon: 'none'
                });
            }
        });
    }
  }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.content {
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.nav {
    background-color: #007AFF;
    width: 100%;
    height: 180rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
}

.name {
    font-size: 32rpx;
    color: #fff;
    margin-right: 20rpx;
}

.search {
    flex: 1;
    border: none;
    border-radius: 10rpx;
    background-color: #fff;
    height: 60rpx;
    padding: 0 15rpx;
    font-size: 28rpx;
}

.tupian {
    width: 100%;
    height: 300rpx;
    margin-top: 20rpx;
    overflow: hidden;
}

.tupian image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sort {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #0096FF, #E6F4FF);
    text-align: center;
    padding: 20rpx 0;
}

.sort-left,
.sort-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.sortlist {
    width: 180rpx;
    margin: 20rpx 0;
}

.sortimg {
    width: 120rpx;
    height: 120rpx;
}

.shop {
    width: 100%;
    margin-top: 20rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    font-size: 32rpx;
    border-bottom: 1rpx solid #ccc;
}

.hot {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20rpx;
}

.logoimg {
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
}

.shop-info {
    display: flex;
    flex-direction: column;
}

.shop-name {
    font-size: 36rpx;
    margin-bottom: 10rpx;
}

.shop-data {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 5rpx;
}

.shop-slogan {
    font-size: 28rpx;
}

.separator {
    width: 90%;
    height: 1rpx;
    background-color: #ccc;
    margin: 0 auto;
}
</style>